<template>
  <div class="create-or-edit">
    <el-form>
      <el-form-item label="章节名称">
        <el-input v-model="chapter.sectionName"></el-input>
      </el-form-item>
      <el-form-item label="章节描述">
        <el-input v-model="chapter.description"></el-input>
      </el-form-item>
      <el-form-item label="课时排序">
        <el-input v-model="chapter.orderNum" type="number" :min="0">
          <template slot="append">数字控制排序，数字越大越靠后</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getBySectionId, saveOrUpdateSection } from "@/services/course-section";
import { getChapterAndSection } from "@/services/course";

export default {
  data() {
    return {
      chapter: {
        id: 0,
        courseId: 0,
        courseName: "",
        sectionName: "",
        description: "",
        orderNum: 0,
        status: 0,
      },
    };
  },
  props: {
    sectionId: {
      default: 0,
    },
    isEdit: {
      type: Boolean,
    },
    courseId: {
      type: [String, Number],
    },
  },
  methods: {
    onCancel() {
      // 设置取消状态，让父组件处理
      this.$emit("cancel");
    },
    async onSubmit() {
      await saveOrUpdateSection(this.chapter);
      this.$emit("success");
      this.$message.success("添加成功");
    },
    async loadInfo() {
      // console.log(this.isEdit);
      if (this.isEdit) {
        const { data } = await getBySectionId(this.sectionId);
        this.chapter = data.data;
      } else {
        this.chapter = {
          courseId: 0,
          sectionName: "",
          description: "",
          orderNum: 0,
          status: 0,
        };
        this.chapter.courseId = this.courseId;
      }
    },
  },
  created() {
    this.loadInfo();
  },
  watch: {
    sectionId(newVal) {
      this.loadInfo(newVal);
    },
  },
};
</script>

<style lang="scss" scoped></style>
